---
title: Χρωματική Σχεδίαση
image: /images/user-guide/fields/field.png
---

<Frame>
  <img src="/images/user-guide/fields/field.png" alt="Header" />
</Frame>

## Color Scheme Card

Αντιπροσωπεύει διαφορετικά σχέδια χρωμάτων και είναι ειδικά διαμορφωμένο για φωτεινά και σκοτεινά θέματα.

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemeCard } from "twenty-ui/display";

export const MyComponent = () => {
  return (
      <ColorSchemeCard
      variant="Dark"
      selected={true}
      />
  );
};
```

</Tab>

<Tab title="Props">

| Ιδιότητες          | Τύπος                                   | Περιγραφή                                                                                                       | Προεπιλογή |
| ------------------ | --------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ---------- |
| "variant"          | αλφαριθμητικό                           | Η παραλλαγή του σχεδίου χρωμάτων. Οι επιλογές περιλαμβάνουν `Σκοτεινό`, `Φωτεινό` και `Σύστημα` | φωτεινό    |
| επιλεγμένο         | boolean                                 | Αν είναι `true`, εμφανίζει ένα τσεκ για να υποδείξει το επιλεγμένο σχέδιο χρωμάτων                              |            |
| επιπλέον ιδιότητες | `React.ComponentPropsWithoutRef<'div'>` | Πρότυπες ιδιότητες στοιχείου HTML `div`                                                                         |            |

</Tab>

</Tabs>

## Επιλογή Σχεδίου Χρωμάτων

Επιτρέπει στους χρήστες να επιλέξουν ανάμεσα σε διαφορετικά σχέδια χρωμάτων.

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemePicker } from "twenty-ui/display";

export const MyComponent = () => {
  return <ColorSchemePicker
  value="Dark"
  onChange
  />;
};
```

</Tab>

<Tab title="Props">

| Ιδιότητες       | Τύπος                | Περιγραφή                                                                    |
| --------------- | -------------------- | ---------------------------------------------------------------------------- |
| αξία            | `Χρωματική Σχεδίαση` | Το επιλεγμένο σχέδιο χρωμάτων αυτή τη στιγμή                                 |
| κατά την αλλαγή | λειτουργία           | The callback function you want to trigger when a user selects a color scheme |

</Tab>

</Tabs>
